<!-- <template>
  <div class="app-container">
    <div
      style="
        width: 100%;
        height: 50px;
        background-color: #67c335;
        color: #fff;
        line-height: 50px;
        margin-bottom: 10px;
        font-size: 18px;
        padding-left: 20px;
      "
    >
      省分组分项检查统计
    </div>
    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="provinceId" label="省编号" />
        <el-table-column prop="pshort" label="省简称" />
        <el-table-column prop="pname" label="省名称" />
        <el-table-column prop="so2Num" label="SO2超标累计" />
        <el-table-column prop="coNum" label="CO超标累计" />
        <el-table-column prop="pmNum" label="PM2.5超标累计" />
        <el-table-column prop="aqiNum" label="AQI超标累计" />
      </el-table>
    </el-card>
  </div>
</template> -->
<template>
  <div class="app-container">
    <div class="header">省分组分项检查统计</div>
    <el-card class="table-container" shadow="hover">
      <!-- <el-table :data="tableData" style="width: 100%"> -->
      <el-table :data="tableData">
        <el-table-column prop="provinceId" label="省编号" width="120px" />
        <el-table-column prop="pshort" label="省简称" width="100px" />
        <el-table-column prop="pname" label="省名称" />
        <el-table-column prop="so2Num" label="SO2超标累计" width="150px" />
        <el-table-column prop="coNum" label="CO超标累计" width="150px" />
        <el-table-column prop="pmNum" label="PM2.5超标累计" width="150px" />
        <el-table-column prop="aqiNum" label="AQI超标累计" width="150px" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import FeedbackAPI from "@/api/feedback";
import ProvinceAPI from "@/api/province";
import { ElMessage } from "element-plus";

const tableData: any = ref([]);

function reqTableList() {
  ProvinceAPI.excessiveStatistics().then((res) => {
    console.log(res);
    tableData.value = [];
    for (const v of res) {
      tableData.value.push(v);
    }
  });
}

onMounted(() => {
  reqTableList();
});
</script>


<style scoped>
.app-container {
  padding: 20px;
  font-family: "Arial", sans-serif;
  background-color: #f9f9f9; /* 接近白色的背景色 */
}

.header {
  width: 100%;
  height: 60px;
  background-color: #fff; /* 更淡的颜色 */
  color: #333; /* 深色文字以提高可读性 */
  line-height: 60px;
  padding-left: 20px;
  font-size: 20px;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的盒子阴影 */
  margin-bottom: 20px; /* 与内容保持一定间距 */
}

.table-container {
  margin: 0 auto; /* 表格自动居中 */
  background-color: white;
  border-radius: 8px; /* 圆角边框 */
  overflow: hidden; /* 隐藏溢出部分 */
}

.el-table {
  /*width: 100%;  确保表格宽度充满容器 */
  width: 85%;
  border-collapse: collapse; /* 使单元格边框合并为一个单一的边框 */
  margin: 0 auto;
}

.el-table th,
.el-table td {
  padding: 8px 4px; /* 减少单元格内边距，使列间距更紧凑 */
  border: none; /* 移除单元格边框 */
  text-align: center; /* 内容居中对齐 */
}

.el-table th {
  background-color: #ecf0f1; /* 表头背景色 */
  color: #2c3e50; /* 表头文字颜色 */
  border-bottom: 1px solid #ebeef5; /* 表头底部边框 */
}

.el-table tr {
  background-color: white; /* 行背景色 */
  transition: background-color 0.3s; /* 过渡效果 */
}

.el-table tr:hover {
  background-color: #e9f4eb; /* 鼠标悬停时的背景色 */
}

.el-table th:last-child,
.el-table td:last-child {
  border-right: none; /* 移除最右侧列的边框 */
}

/* 隐藏滚动条 */
.table-container ::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media screen and (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  .el-table {
    display: block; /* 使表格在小屏幕上水平滚动 */
  }
}
</style>
